<template>
<div class="crud-wrap">
  <!--查询区域-->
  <div class="filter-wrap">
    <xdh-filter-panel v-if="filterForm.length" 
      title="查询条件" 
      :model.sync="filterModel"
      :collapsible="true" @on-query="handleQuery"
      class="curd-filter"
      :form-prop="{'label-width': '80px', 'label-position': 'top'}"
    >
      <slot name="filter" :forms="filterForm" :model="filterModel">
        <el-form-item class="curd-filter-item" :label="filterForm[0].label" 
          :prop="filterForm[0].prop"
        >
          <el-input size="mini" v-model="filterModel[filterForm[0].prop]"></el-input>
        </el-form-item>
        <template slot="expand">
          <el-form-item class="curd-filter-item" v-for="(item, index) in filterForm" 
            :key="item.prop" :label="item.label" :prop="item.prop"
            v-show="index !== 0"
          >
            <el-input size="mini" v-model="filterModel[item.prop]"></el-input>
          </el-form-item>
        </template>
      </slot>
    </xdh-filter-panel>
  </div>

  <!--表格区域-->
  <div class="table-wrap">
    <div class="table">
      <xdh-list-panel 
        :fit="true" title="列表" 
        :sizes="[5]" :size="5" 
        :is-auto="true" :state="state" 
        :pager="true" :load="listLoad"
        ref="table"
      >
        <template slot="tool" >
          <el-button size="mini" type="primary" @click="dialogClosed = false">新增</el-button>
        </template>
        <xdh-table height="100%"
          :resizable="true"
          :data="state.list"
          :columns="tableColumns"
        >
          <template slot="ctrl" slot-scope="scope">
            <el-button size="small" type="primary" @click="test(scope)">编辑</el-button>
          </template>
        </xdh-table>
      </xdh-list-panel>
    </div>
  </div>

  <!--新增弹窗-->
  <xdh-dialog-form class="curd-edit-form" mode="insert" title="新增"
    v-if="editForm.length"
    :model="addModel"
    :closed.sync="dialogClosed"
    :on-insert="handleInsert"
    :rules = "formRules"
    label-position="top"
    width="700px"
  >
    <template slot-scope="scope"> 
      <slot name="formDialog" :forms="editForm">          
        <el-form-item style="margin-bottom:5px" 
          class="curd-edit-input xdh-validate--right" 
          v-for="item in editForm" 
          :key="item.prop" :label="item.label" 
          :prop="item.prop"
        >
          <el-input size="mini" v-model="scope.model[item.prop]"></el-input>
        </el-form-item>
      </slot>
    </template>
  </xdh-dialog-form>
</div>
</template>

<style lang="scss" scoped>
.crud-wrap{
  display: flex;
  flex-flow: column;
  height: 100%;
  .filter-wrap{
    flex: 0 0 auto;
    // border-bottom: 2px solid green;
    .curd-filter{
      /deep/ .el-form--label-top{
        .curd-filter-item.el-form-item{
          .el-form-item__label{
            line-height: 24px;
            padding: 0;
          }
        }
      }
      /deep/ .el-form--inline{
        .el-form-item{
          vertical-align: bottom;
        }
      }
    }
  }
  .table-wrap{
    flex: 1;
    width: 100%;  // 与移动端调试用
    min-height: 400px; // 与移动端调试用
    // border-bottom: 2px solid red;
    .table{
      height: 100%;
      /deep/ .el-main.xdh-layout__main{ // 移动端调试（撑开表格）
        min-width: 300px;
        .xdh-list-panel__body{ // 移动端调试（撑开表格）
          height: 100%;
        }
      }
    }
  }
  
}
.curd-edit-form{
  /deep/ .el-form--label-top{
    .el-form-item__label{
      padding: 0;
      line-height: 1;
    }
    .xdh-validate--right .el-form-item__error{
      right: 0;
      transform: translate(0%, -50%);
      background: none;
    }
  }
  
}
</style>

<script>
import XdhFilterPanel from '@/widgets/xdh-filter-panel'
import XdhListPanel from '@/widgets/xdh-list-panel'
import XdhTable from '@/widgets/xdh-table'
import XdhDialogForm from '@/widgets/xdh-dialog-form'
const _filterEmptyOpt = function(obj) {
  let _obj = {}
  for (const key in obj) {
    if (obj.hasOwnProperty(key) && obj[key]) { _obj[key] = obj[key] }
  }
  return _obj
}
const INDEXCOL = { type: 'index', label: '序号', fixed: 'left', width: '80' }
const CONTROLCOL = { label: '操作', fixed: 'right', width: '100', prop: 'ctrl' }
export default {
  name: 'tableCurd',
  mixins: [],
  components: {
    XdhFilterPanel,
    XdhListPanel,
    XdhTable,
    XdhDialogForm
  },
  props: {
    getAction: {
      type: String,
      default: ''
    },
    searchAction: {
      type: String,
      default: ''
    },
    rules: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      state: {
        total: 0,
        list: []
      },

      tableColumns: [],
      dialogClosed: true,
      
      filterModel: {},
      filterForm: [],

      addModel: {},
      editModel: {},
      editForm: [],
      formRules: []
      // rules: []
    }
  },
  watch: {
    
  },
  methods: {
    test(scope) {
      console.log(scope)
    },
    listLoad(page, limit) {
      return this.$store.dispatch(this.getAction, {
        data: {
          pageSize: limit,
          pageIndex: page
        }
      }).then((res) => {
        // console.log(res.list)
        this.state.total = res.total
        this.state.list = res.list
        this.tableColumns = this._tableColumnInit(res.colData)
        this._filterDataInit(res.colData)
        this._editDataInit(res.colData)
      })
    },
    handleQuery(model) {
      let query = _filterEmptyOpt(model)
      if (!Object.entries(query).length) {
        this.$refs.table.reload()
        return
      }
      this.$store.dispatch(this.searchAction, {
        data: query
      }).then((res) => {
        this.state.list = res.list
        this.state.total = res.list.length
      })
    },
    handleInsert(model) {
      console.log(model)
      return Promise.resolve()
    },
    _tableColumnInit(colData) { // 初始化列表头
      let contents = colData.map((item) => {
        return {
          label: item.label,
          prop: item.prop,
          showOverflowTooltip: true
        }
      })
      return [ INDEXCOL, ...contents, CONTROLCOL ]
    },
    
    _filterDataInit(colData) {
      let filterModel = {}
      let filterForm = []
      colData.forEach((item) => {
        if (item.filterable) {
          filterModel[item.prop] = ''
          let input = {
            prop: item.prop,
            label: item.label,
            type: item.type
          }
          filterForm.push(input)
        }
      })
      this.filterModel = filterModel
      this.filterForm = filterForm
    },

    _editDataInit(colData) {
      let addModel = {}
      let editModel = {}
      let editForm = []
      let rules = {}
      colData.forEach((item) => {
        addModel[item.prop] = editModel[item.prop] = ''
        let input = {
          prop: item.prop,
          label: item.label,
          type: item.type
        } 
        if (item.necessary) {
          let rule = {
            required: true,
            message: `请输入${item.label}`,
            toggle: 'blur'
          }
          rules[item.prop] = [rule]
        }
        editForm.push(input)
      })
      
      this.addModel = addModel
      this.editModel = editModel
      this.editForm = editForm

      if (Object.entries(this.rules).length) {
        Object.entries(this.rules).forEach((rule) => {
          rules[rule[0]] = rules[rule[0]].concat(rule[1])
        })
      }
      this.formRules = rules
    }
    
  },
  created() {
  },
  mounted() {
  }
}
</script>

